﻿*{
    margin: 0;padding: 0;list-style: none;font-family: '微软雅黑';
    font-size: 100px;text-decoration: none;
}
html,body{height: 100%;overflow: hidden;background: #3170fd;}
// ??
.scrolls{
    position: absolute;left: 0;top: 0;width: 100%;display:none;z-index: 100;
    button{
        font-size: 0.26rem;line-height: 0.26rem;margin: 0 0 0 0;
        padding: .08rem .12rem;
    }
    .jinru{
        position: absolute;left: 0;top: 0;
    }
    .tuichu{
        position: absolute;right: 0;top: 0;
    }
}
// content
#box{
    width: 98%;height: 96%;overflow: hidden;
    border: 2px solid #2864e7;box-shadow: 5px 5px 5px #2864e7;
    box-sizing: border-box;
    position: absolute;left: 0;top: 0;right: 0;bottom: 0;margin: auto;
}
.box-content{
    width: 90%;overflow: hidden;position: relative;height: 100%;
    box-shadow: 2px 2px 2px #2864e7;
}
.box-content>li{
    width: 100%;height: 100%;position: absolute;overflow: hidden;
    left: 0;top: 100%;line-height: 1.34rem;
    text-align: justify;
    background: #3170fd;
}
.box-content .active{
    left: 0;top: 0;
}
.box-content li>div{
    font-size: 1.1rem;overflow: hidden;color: yellow;
    position: absolute;left: 50%;top: 50%;
    transform: translate(-50%,-50%);
    width: 94%;letter-spacing: 2px;
    // font-weight: bold;
}
.box-content li>div span:nth-of-type(2){
    text-indent: 2.1rem;display: inline-block;
}


// .content2 li{pointer-events: none;}   ??????  rgb(56, 43, 43)
.box-list::-webkit-scrollbar {display:none;}
.box-list{
    width: 10%;height: 96%;
    position: absolute;right: -10%;top: 0;overflow: hidden;
}
.box-list li{
    width: 1.1rem;height: .3rem;border-radius: .2rem;
    background: #264ea3;text-align: center;
    line-height: .3rem;color: #eee;
    font-size: .18rem;
    margin: .28rem auto 0;
    padding: .04rem 0;
    cursor: pointer;
}
.box-list .active{
    background: red;
}
// tishi
.liststr{
    position: absolute;right: -1.15rem;top:calc(50% - .15rem);
    font-size: .14rem;background: #224faf;width: 1.4rem;height:.32rem;
    cursor: pointer;text-align: left;line-height: .34rem;
    border-radius: .5rem;text-indent: .07rem;
    color: #fff;
}


// fixed
.fixed{
    width: 100%;height:100%;position: fixed;left: 0;top: 0;
    background: rgba(0,0,0,0.6);z-index: 200;
    display: none;
}
.fixed dl{
    position: absolute;left: 0;top: 0;right: 0;bottom: 0;margin: auto;width: 100%;height:100%;
    background: #3170fd;border-radius: .1rem;
}
.fixed dt{
    font-size: 1.14rem;line-height: 1.34rem;
    text-align: justify;letter-spacing: 2px;
    width: 94%;color: yellow;
    position: absolute;left: 50%;top: 50%;
    transform: translate(-50%,-50%);
}
.fixed dt span:nth-of-type(2){
    text-indent: 2.1rem;display: inline-block;
}
.fixed dd{
    font-size: 0.3rem;line-height: .5rem;width: .5rem;height:.5rem;background: #ccc;
    color: red;border-radius: 50%;text-align: center;
    position: absolute;top: .1rem;right: .1rem;
    cursor: pointer;
}



